<template>
<div class="container">
  <van-nav-bar
      title="订单列表"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
  />

  <div class="mainBody">

    <div v-for="item in goodList" :key="item.order_num" class="orderItem">
      <div class="goodsList">
      <OrderListCard style="margin-top:5px" :cartdata="goodInfo" v-for="(goodInfo,idx) in item.goods_info" :key="idx"></OrderListCard>
      </div>
      <div class="orderInfo">
        <span class="info">订单金额:{{item.total}}</span>
        <span class="info">订单编号: {{item.order_num}}
        </span>
        <span class="info">订单状态:<van-button v-if="item.status==0" type="primary" size="mini">待支付</van-button>
        <span v-else>已支付</span></span>
      </div>
    </div>
    <div v-if="goodList.length==0" style="height:150px;line-height: 150px;font-size: 20px;text-align: center;color: #999999">
      空空如也
    </div>

  </div>
</div>
</template>

<script>
import OrderListCard from "@/components/OrderListCard"
export default {
  name: "OrderLists",
  components:{
    OrderListCard
  },
  created() {
    this.getOrderList()
  },
  data(){
    return{
      goodList:[]
    }
  },
  methods:{
    getGoodsInfo(val){
      let arr=[]
      val.forEach((item)=>{
       arr.push(  this.$http.get('/goods/getGoodsList',{
         params:{
           ids:item.goods_info
         }
       }).then(res=>{
         item.goods_info=res.data.result
         return item
       }))
       })
       Promise.all(arr).then(res=>{   //用这个发多请求真不错
         this.goodList=res
       })
    },
    getOrderList(){
      this.$http.get('/orders').then(res=>{
        this.getGoodsInfo(res.data.result)
      })
    },
    onClickLeft() {
      this.$router.back()
    }

  }
}
</script>

<style scoped lang="less">
.container{
  padding: 50px 15px 0 15px;
  .mainBody{
    .orderItem{
      background-color: #eee;
      border-radius: 10px;
      .orderInfo{
        padding: 10px 0 10px 0;
        .info{
          display:block;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          font-weight: 600;
          line-height: 20px;
          padding-left: 10px;
        }
      }

    }
  }
}
</style>
